<%@ page contentType="text/html;charset=UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="basePath" value="${pageContext.request.contextPath}" scope="application" />
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <title>心理测试</title>
    <link rel="stylesheet" href="${basePath }/static/news/test/css/style.css">
    <script src="${basePath }/static/news/js/jquery-2.2.1.js"></script>
</head>
<body>
<section>
	<!-- 答题答案记录 -->
	<div id="AnswerDetails-div-id">
	</div>
    <h1 class="title" id = "titleStart-h1-id">${PsychTest.title }</h1>
	<!--测试结果 -->
    <h1 class="title" hidden id = "titleBearFruit-h1-id" >测试结果</h1>
	<!--question -->
	<form action="">
    	<input type="hidden" name="snStamp" value="${snStamp }" />
    	<input type="hidden" name="num" value="${num }" />
    </form>
    <!--题目 -->
    <div class="content" id="detailtest-div-id" >  
    </div>
	<!-- answer -->
    <div class="content answer" id="detailAnswer-div-id" hidden >
        <img src="${basePath }/static/news/test/img/img.jpg" id="jpg-imp-id" alt="" class="queImg">
        <div class="box"><p class="answer_content flex1" id="word-p-id">额额额额，网络似乎开小差了。。。</p></div>
        <div class="suggest">
            <lable>建议：</lable>
            <p id="propose-p-id">网络不佳，骚后再测...</p>
        </div>
    </div>
</section>
<!--page -->
<footer id = 'buttonUpDown-footer-id'>
    <div class="content box" >
        <div class="flex1 lasted"><a href="javascript:upTest()">上一题</a></div>
        <h3 class="flex1 page"><label for="" id="pagenum">1</label>/${length}</h3>
        <div class="flex1 next"><a href="javascript:downTest()" id="submit-a-id" >下一题</a></div>
    </div>
</footer>
<footer id = 'buttonRedirect-footer-id' hidden>
    <div class="content box"  >
        <div class="flex1 next"><a href="javascript:success()">完成</a></div>
    </div>
</footer>
<script type="text/javascript">
	var submitbut = "提交";
	$(function(){
		Testdetail("${empty num?1:num}",null);
	})
	/**请求题目*/
	function Testdetail(num,answers){// 请求题目
		$.ajax({
	        url: '${basePath }/psychTest/ajaxTestdetail',
	        datatype: 'json',
	        type: 'post',// ‘get’
	        data:{snStamp:"${snStamp}",num:num,answers:answers},
	        success: function (data) {
	        	$("#detailtest-div-id").html("");
	        	$("#detailtest-div-id").html(data);
	        	$("#pagenum").html(num);
	        }
		});
	}
	/**上一题*/
	function upTest(){ 
		if($("#submit-a-id").html() == submitbut){
			$("#submit-a-id").html("下一提");
		}
		var answer = $('.answer-input-class:checked').val();
		var num = parseInt($("#pagenum").html());
		answerSave(num)
		num = num-1;
		var upanswer = $("#answer-input-"+num).val()
		if(num<1){
			alert("前面没有更多题目了！")
			return false;
		}
		Testdetail(num,upanswer);
	}
	/**下一题*/
	function downTest(){
		var flag = true;
		$('.answer-input-class:checked').each(function(i){
			flag = false;
		})
		if(flag){
			alert("至少勾选一个选项！");
			return false;
		}
		var num = parseInt($("#pagenum").html());
		answerSave(num)
		num = num + 1;
		var upanswer = $("#answer-input-"+num).val()
		if(num=="${length}"){
			$("#submit-a-id").text(submitbut);
		}
		if(num>"${length}"){
			$('.answer-input-class:checked').val();
			submitTest();	
			return false;
		}
		Testdetail(num,upanswer);
	}
	/**完成答题提交*/
	function submitTest(){
		var answers = new Array();
		$('.answerall-input-class').each(function(i){
			answers[i] = $(this).val();
		})
		$.ajax({
	        url: '${basePath }/psychTest/submitTest',
	        traditional: true,
	        datatype: 'json',
	        type: 'post',
	        data:{answers:answers,snStamp:"${snStamp}"},
	        success: function (data) {
	        	if(data!=null&&data!=''){
	        		data = jQuery.parseJSON(data)
	        	}
	        	$("#word-p-id").html(data.word);
	        	$("#propose-p-id").html(data.word);
	        	$("#jpg-imp-id").attr("src","${basePath }/file/download?path="+data.url);
	        	$("#titleBearFruit-h1-id").removeAttr("hidden")
	        	$("#detailAnswer-div-id").removeAttr("hidden")
	        	$("#buttonRedirect-footer-id").removeAttr("hidden")
	        	$("#titleStart-h1-id").attr("hidden","");
	        	$("#detailtest-div-id").attr("hidden","");
	        	$("#buttonUpDown-footer-id").attr("hidden","");
	        }
		});
	}
	/**完成*/
	function success(){
		alert("自定义跳转")
	}
	/**保存答案*/
	function answerSave(num){
		var answers = "";
		$('.answer-input-class:checked').each(function(i){
			if(i>0){
				answers += "+";			
			}
			answers += $(this).val();
		})
		if($("#answer-input-"+num).val()!=null){
			$("#answer-input-"+num).val(answers)
		}else{
			var answerinput = "<input type='hidden' id='answer-input-"+num+"' class='answerall-input-class' name='answer' value="+answers+" />";
			$("#AnswerDetails-div-id").append(answerinput);
		}
		return answers;
	}
</script>
</body>
</html>